﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Visualisation</title>

    <style>
        html {
            /*ms-content-zooming: none;*/
            ms-touch-action: none;
            /*content-zooming: none;*/
            touch-action: none;
        }
        body {
            overflow: hidden;
        }
        button {
            pointer-events:all;
            display: inline;
            text-overflow: ellipsis;
            overflow-x: hidden;
            overflow-y: hidden;
            word-wrap: normal;
            text-align: center;
            border: 1px solid #c6c6c6;
            background-color: #FDFDFD;
            margin-right: 4px;
            margin-left: 4px;
            height: 20px;
            width: auto;
        }
        button:hover {
            background-color: rgb(177, 214, 240) !important;
        }
        #messages {
            width: 300px;
        }

        body {
            margin-top: 0px;
            margin-bottom: 0px;
            margin-left: 0px;
            margin-right: 0px;
            padding: 0;
        }

        .link {
            fill: none;
            stroke: #FBFAF7;
            stroke-width: 3;
            stroke-dasharray: 0.5,7;
            stroke-linecap: round;
        }
        .link-selected {
            stroke-width: 5;
        }
        .nodetext {
            pointer-events: none;
            font-size: 10px;
            font-family: 'Segoe UI';
            fill: #FBFAF7;
        }
       
        .infoBox {
            transition: opacity 0.3s;
            position: absolute;
            text-align: left;
            min-width: 120px;
            max-width: 250px;
            padding: 2px;
            font: 9px 'Segoe UI';
            background: #ffffff;
            background-position: left bottom;
            background-repeat: repeat-x;
            overflow: hidden;
            text-overflow: ellipsis;
            border: 1px solid #989898;
            min-height: 60px;
            background-image: url();
        }
        .infoBox li{
            list-style-type:none;
        }
        .button-openrecord {
            cursor: pointer;
            width: 20px;
            height: 16px;
            background-repeat: no-repeat;
            background-image: url();
        }
        .button-closeImage {
            float: right;
            cursor: pointer;
            width: 16px;
            height: 16px;
            background-repeat: no-repeat;
            background-image: url();
        }
        .infoboxButtons {
            float: left;
        }
        .button {
            display: inline-block;
        }
        #userList {
            pointer-events: none;
            position: absolute;
            left: 0px;
            top: 0px;
            width: 250px;
            clear: both;
        }
        #userList li {
            display: table;
            border-collapse: collapse;
            width: 100%;
        }
        #connectionList li {
            display: table;
            border-collapse: collapse;
            width: 100%;
        }
        #connectionList {
            pointer-events: none;
            position: absolute;
            right: 0px;
            top: 0px;
            width: 250px;
            clear: both;
        }
        .image-party {
            pointer-events:all;
            cursor: pointer;
            display: table-cell;
            width: 32px;
            height: 32px;
            background-repeat: no-repeat;
            
        }
        .image-refresh32 {
            background-image: url();
        }
        .image-user32 {
            background-image: url();
        }
        .image-team32 {
            background-image: url();
        }
        .image-plus32 {
            background-repeat: no-repeat;
            background-image: url();
         }
        .image-minus32 {
            background-repeat: no-repeat;
            background-image: url();
        }
        .image-connection {
            background-repeat: no-repeat;
            background-image: url();
        }
        .image-button {
            background-color: transparent;
            border: none;
            width: 32px;
            height: 32px;
        }
        .image-button:hover {
            border: none;
        }
        .user-label {
            pointer-events:all;
            font: 9px 'Segoe UI';
            cursor: pointer;
            color: #FFFFFF;
        }
        .userList-inner {
            display: table-row;
            overflow: hidden;
        }

        .li-text {
            display: table-cell;
            vertical-align: middle;
        }
        .selectedUser {
            background-color: rgba(96, 96, 96, 0.67);
        }
        .progress-label {
            margin-bottom: 8px;
        }
       
        #progress button {
            height: 16px;
            font: 9px 'Segoe UI';
            padding-top: 1px;
        }
        #zoom-buttons {
            position: absolute;
            right: 8px;
            top: 0px;
        }
        .selectedtoggle {
            background-color:#60a0cf;
        }
        .statusBox {
            transition: opacity 0.3s;
            background-color: white;
            width: 350px;
          
            text-align: left;
            min-width: 120px;
            max-width: 250px;
            padding: 2px;
            font: 9px 'Segoe UI';
            background: #ffffff;
            background-position: left bottom;
            background-repeat: repeat-x;
            overflow: hidden;
            text-overflow: ellipsis;
            border: 1px solid #989898;
            min-height: 40px;
            background-image: url();
        }
    </style>

</head>
<body class="sparkle-xrm">
  
    <svg id="networksvg" width="100%" height="1000">
        <defs>
            <marker id="arrow2" viewBox="0 0 10 10" refX="20" refY="5" markerUnits="strokeWidth" markerWidth="9" markerHeight="5" orient="auto">
                <path d="M 0 0 L 10 5 L 0 10 z" fill="#BBBBBB"  stroke-linecap="butt" stroke-width="1px"></path>
            </marker>
           
            <filter id="blur1" x="-200%" y="-200%" width="400%" height="400%">
                
                <feColorMatrix type="matrix" values="0 0 0 0   0
                 0 0 0 0   0
                 0 0 0 0   0
                 1 1 1 0.5 0" />
                <feGaussianBlur stdDeviation="4" result="coloredBlur" />
               
                <feMerge>
                    
                    <feMergeNode in="coloredBlur" />
                    <feMergeNode in="SourceGraphic" />
                </feMerge>
               
            </filter>
            <filter id="blur2" x="0" y="0">
                <feGaussianBlur in="SourceGraphic" stdDeviation="0.5" />
            </filter>
            <filter id="no-glow">
                <feColorMatrix type="matrix" values="1.0 0.0 0.0 0.0 0
                                                          0.0 1 0 0.0 0
                                                          0.0 0.0 1.0 0.0 0
                                                          0.0 0.0 0.0 1.0 0"/>
            </filter>
            <filter id="root-node-glow">
                     <feColorMatrix type="matrix" values="0.0 0.0 0.0 0.0 0
                                                          0.0 0.5 0 0.0 0
                                                          0.0 0.0 0.0 0.0 0
                                                          0.0 0.0 0.0 1.0 0"/>
            </filter>

             <filter id="selected-glow">
                     <feColorMatrix type="matrix" values="0.9 0.0 0.0 0.0 0
                                                          0.3 0.0 1 0.0 0
                                                          0.0 0.0 0.0 0.0 0
                                                          0.0 0.0 0.0 1.0 0"/>
            </filter>
            <radialGradient id="Gradient1">
                <stop offset="0%" stop-color="#33476A" />
                <stop offset="100%" stop-color="#1C2E4C" />
            </radialGradient>
            <filter id="dropShadow" x="0" y="0" width="200%" height="200%">
                <feOffset result="offOut" in="SourceGraphic" dx="5" dy="5" />
                <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
                <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
            </filter>
        </defs>
        <rect id="bgFill" x="0" y="0" rx="0" ry="0" width="100%" height="100%" fill="url(#Gradient1)" />

   
    </svg>
     <ul id='userList' style="display:none" data-bind='visible:true'>
     <li id="progress" class="statusBox" data-bind="fadeVisible: isBusy"> 
         <table height="100%" width="100%"> 
             <tr> 
                 <td align="center" valign="middle"> 
                     <div class="progress-label" data-bind="text: isBusyMessage"></div> 
                      <button type="button" title="Cancel" text="Cancel" data-bind="click: CancelCommand">Cancel</button>
                      <button type="button" title="Load More" text="Load More" data-bind="click: LoadMoreCommand,visible: LoadIsPaused">Load More</button>
                  </td> 
             </tr> 
         </table> 
     </li> 
      
         <!-- ko template: {foreach: UsersAndTeams } -->
        <li data-bind=" click: function () { $parent.UserClickCommand($parent, $data); }">
            <div class="userlist-inner" data-bind="css: { selectedUser: id === $parent.SelectedUserId() }" }>
            <div class="image-party li-img" data-bind="css: {'image-user32': !isTeam,'image-team32': isTeam}"></div>
            <div class="user-label li-text" data-bind='text: fullname'> </div>
                </div>
        </li>
         <!-- /ko -->
        

    </ul>
    <ul id='connectionList' style="display:none" data-bind='visible: true'>
        
          <!-- ko template: {foreach: ConnectionRoles } -->
        <li data-bind=" click: function () { $parent.ConnectionRoleClickCommand($parent, $data); }">
            <div class="userlist-inner" data-bind="css: { selectedUser: $parent.SelectedConnectionRoles().contains($data) }" }>
            <div class="image-party li-img image-connection" ></div>
            <div class="user-label li-text" data-bind='text: $data'> </div>
                </div>
        </li>
         <!-- /ko -->
     </ul>
    
    
    <div id='infoBox' class='infoBox' style='opacity:0;' ">
          <div data-bind="click: CloseInfoBoxCommand" id="button-close" class=" button-closeImage"></div>
         <span data-bind='text: SelectedNode().name'></span>
        <table style="table-layout: fixed; direction: ltr; min-height:20px" cellspacing="0" cellpadding="3" valign="top" data-bind="with:SelectedNode()">
            <colgroup>
                <col width="50">
                <col>
            <tbody data-bind="foreach: $data.GetQuickViewForm($root)">
                <tr min-height="25">
                    <td title="" data-bind='text: label' style="text-align:right"></td>
                    <td data-height="25" data-bind='text: value' style="text-overflow:ellipsis;white-space: nowrap;"></td>
                </tr>
                
                
            </tbody>

        </table>
        <div class="infoboxButtons">
       
            <div data-bind="click: DrillIntoCommand" id="button-openrecord" class="button button-openrecord"></div>
           
        </div>

    </div>
   
     
   
    <div id="zoom-buttons">
         <button type="button" class="image-button image-refresh32" title="Demo Mode" data-bind="click: DemoModeClickCommand, css: { selectedtoggle: $root.DemoMode() }"  ></button>
         <button type="button" class="image-button image-minus32" title="Zoom Out" data-bind="click: ZoomOutCommand"></button>
         <button type="button" class="image-button image-plus32" title="Zoom In" data-bind="click: ZoomInCommand"></button>
     </div>
       
    <script>
        window.APPLICATION_VERSION = '6.0';
    </script>
    <!-- Sparkle Xrm dependancies -->
    <script src="../../sparkle_/js/SparkleXrmUI_Dependancies.js"></script>
    <!-- Sparkle Xrm -->
    <script src="../../sparkle_/js/mscorlib.js" type="text/javascript"></script>
    <script src="../../sparkle_/js/SparkleXrm.js" type="text/javascript"></script>
    <script src="../../sparkle_/js/SparkleXrmUI.js" type="text/javascript"></script>


    <!-- Client Code -->
    <script src="../js/d3.v3.min.js" type="text/javascript"></script>

    <script src="../js/NetworkViewClient.js" type="text/javascript"></script>
    <script src="../../ClientGlobalContext.js.aspx" type="text/javascript"></script>
    <script type="text/javascript">

       ClientUI.Views.NetworkView.Init();

    </script>
</body>
</html>
